<template>
    <ul>
        <h1>get方法得到的数据</h1>
        <li v-for="(item, index) in postContent">
            {{ item }}
            <el-button @click="handleAdd(index)">
                post请求
            </el-button>
            <el-button @click="handlePut(index)">
                put请求
            </el-button>
            <el-button @click="handlePatch(index)">
                patch请求
            </el-button>
            <el-button type="danger" @click="handleDelete(index)">
                delete请求
            </el-button>
        </li>
        <h4>const handleAdd = async (index) => {
            const res = await postTestAPI(index)
            postContent.value.push(res.data.items)
            }</h4>
        <h1>post为直接添加数据所以不能用来更改</h1>
        <h1>put请求传入一个id然后更改id为这个的数的数据</h1>
        <h1>因为db.json的id为4位的随机数，可以动态设置为inde + 1</h1>
        <h1>patch请求</h1>
        <h1>
            put与patch的区别是put为完全替换，patch为选择替换
        </h1>
    </ul>
</template>
<script setup>
import { getTestAPI, postTestAPI, putTestAPI, patchTestAPI, deleteTestAPI } from '@/API/post';
import { onMounted, ref } from 'vue';
const postContent = ref([])
// 页面启动调用get请求得到数据
onMounted(async () => {
    const res = await getTestAPI()
    postContent.value = res.data.map(item => item.items)
})
// 处理post请求
const handleAdd = async (index) => {
    console.log(index);
    const res = await postTestAPI(postContent.value.length)
    postContent.value.push(res.data.items)

}
// 处理put请求
const handlePut = async (index) => {
    const res = await putTestAPI(index)
    console.log(res);
    await getTestAPI()
}
// 处理patch请求
const handlePatch = async (index) => {
    const res = await patchTestAPI(index)
    postContent.value[index] = res.data.items
    await getTestAPI()
}
// 处理delete请求
const handleDelete = async (index) => {
    const res = await deleteTestAPI(index)
    console.log(res);

    const rr = await getTestAPI()
    postContent.value = rr.data.map(item => item.items)
}
</script>